<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../../images/favicon.ico">

        <title>洲博通 - Dashboard Contact / Employee </title>

        <!-- 文件导入，共性抽取 -->
        <script src="../../../assets/vendor_components/jquery/dist/jquery.js"></script>
        <script src="../../js/template-web.js"></script>
        <script src="../../js/mockData.js"></script>

        <!-- Bootstrap 4.0-->
        <link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">

        <!-- iCheck -->
        <link rel="stylesheet" href="../../../assets/vendor_plugins/iCheck/flat/blue.css">

        <!-- Bootstrap extend-->
        <link rel="stylesheet" href="../../css/bootstrap-extend.css">

        <!-- Theme style -->
        <link rel="stylesheet" href="../../css/master_style.css">

        <!-- 洲博通 skins -->
        <link rel="stylesheet" href="../../css/skins/_all-skins.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->


    </head>

    <body class="sidebar-collapse skin-blue sidebar-mini">
    <b data-toggle="push-menu" style="display:none"></b>
    
        <aside class="main-sidebar"></aside>


        <div class="wrapper">
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        个人信息
                    </h1>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#"><i class="fa fa-commenting-o"></i> 消息中心</a></li>
                        <li class="breadcrumb-item"><a href="#">个人信息</a></li>
                        <!-- <li class="breadcrumb-item active">个人信息</li> -->
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">

                    <div class="row">
                        <div class="col-lg-3 col-md-12">
                            <div class="box">
                                <div class="box-body">
                                    <div class="contact-page-aside">
                                        <ul class="list-style-none font-size-16">
                                            <li class="box-label"><a href="javascript:void(0)">全部模块信息
                                                    <span>4320</span></a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class=""><a class="" href="javascript:void(0)"><i
                                                        class="fa fa-user-o mr-1" aria-hidden="false"></i>供应商
                                                    <span class="">1123</span></a>
                                            </li>
                                            <li><a class="" href="javascript:void(0)"><i class="fa   fa-codepen mr-1"
                                                        aria-hidden="false"></i>产品 <span class="">103</span></a>
                                            </li>

                                            <li><a class="" href="javascript:void(0)"><i class="fa fa-table mr-1"
                                                        aria-hidden="false"></i>订单<span class="">623</span></a> </li>

                                            <li><a class="" href="javascript:void(0)"><i class="fa fa-gg-circle mr-1"
                                                        aria-hidden="false"></i>付款<span class="">623</span></a> </li>

                                            <li><a class="" href="javascript:void(0)"><i class="fa  fa-gg mr-1"
                                                        aria-hidden="false"></i>收票人
                                                    <span class="">19</span></a>
                                            </li>

                                            <li><a class="" href="javascript:void(0)"><i class="fa  fa-file-text-o mr-1"
                                                        aria-hidden="false"></i>业务合同<span class="">623</span></a> </li>

                                            <li class="box-label"><a href="javascript:void(0)" data-toggle="modal"
                                                    data-target="#myModal" class="btn btn-success text-white mt-10">+
                                                    申请新标签</a></li>

                                            <div id="myModal" class="modal fade in" tabindex="-1" role="dialog"
                                                aria-labelledby="myModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h4 class="modal-title" id="myModalLabel">添加标签</h4>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-hidden="true">×</button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <from class="form-horizontal">
                                                                <div class="form-group">
                                                                    <label class="col-md-12"> 标签名字</label>
                                                                    <div class="col-md-12">
                                                                        <input type="text" class="form-control"
                                                                            placeholder="类型名字"> </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label class="col-md-12">选择数量</label>
                                                                    <div class="col-md-12">
                                                                        <select class="form-control">
                                                                            <option>所有模块</option>
                                                                            <option>10</option>
                                                                            <option>20</option>
                                                                            <option>30</option>
                                                                            <option>40</option>
                                                                            <option>Custome</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </from>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-success"
                                                                data-dismiss="modal">提交</button>
                                                            <button type="button" class="btn btn-default float-right"
                                                                data-dismiss="modal">取消</button>
                                                        </div>
                                                    </div>
                                                    <!-- /.modal-content -->
                                                </div>
                                                <!-- /.modal-dialog -->
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /. box -->
                        </div>
                        <!-- /.col -->
                        <div class="col-lg-9 col-md-12">
                            <div class="box">
                                <div class="box-body xhrMsg">
                                    <div class="flexbox align-items-center p-15 bg-light">
                                        <div class="flexbox align-items-center">

                                            <div class="custom-control custom-checkbox pl-0">
                                                <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i
                                                        class="ion ion-android-checkbox-outline-blank"></i></button>
                                            </div>

                                            <span class="divider-line mx-1"></span>

                                            <button class="btn btn-social btn-dropbox mb-5"
                                                style="height: 30px;line-height: 10px;margin-top: 4px;">
                                                <i class="fa fa-bitbucket" style="width: 35px;line-height: 31px;"></i>
                                                <span>删除</span>
                                            </button>

                                            <div class="dropdown">
                                                <button class="btn btn-default btn-sm dropdown-toggle"
                                                    data-toggle="dropdown" href="#" aria-expanded="false">消息类型</button>
                                                <div class="dropdown-menu" x-placement="bottom-start"
                                                    style="position: absolute; top: 30px; left: 0px; will-change: top, left;">
                                                    <a class="dropdown-item" href="#"><span
                                                            class="badge badge-ring badge-danger mr-1"></span>
                                                        已读</a>
                                                    <a class="dropdown-item" href="#"><span
                                                            class="badge badge-ring badge-warning mr-1"></span>
                                                        未读</a>
                                                </div>
                                            </div>
                                            <div class="dropdown d-none d-sm-block">
                                                <button class="btn btn-default btn-sm dropdown-toggle"
                                                    data-toggle="dropdown" href="#" aria-expanded="false">消息排序</button>
                                                <div class="dropdown-menu" x-placement="bottom-start"
                                                    style="position: absolute; top: 30px; left: 0px; will-change: top, left;">
                                                    <a class="dropdown-item" href="#"><span
                                                            class="badge badge-primary">时间</span></a>
                                                    <a class="dropdown-item" href="#"><span
                                                            class="badge badge-success">来源</span></a>
                                                    <a class="dropdown-item" href="#"><span
                                                            class="badge badge-info">模块</span></a>
                                                    <a class="dropdown-item" href="#"><span
                                                            class="badge badge-danger">概述</span></a>
                                                </div>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="lookup lookup-circle lookup-right">
                                                <input type="text" data-provide="media-search">
                                            </div>
                                        </div>
                                    </div>


                                    <script type="text/html" id="msgTemp">
                                    {{each list value index}}
                                    <div class="media-list media-list-divided media-list-hover">

                                        <div class="media align-items-center">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input">


                                                <!-- <div class="icheckbox_flat-blue" aria-checked="true"
                                                    aria-disabled="false" style="position: relative;">
                                                    <input type="checkbox" class="custom-control-input"
                                                        style="position: absolute; opacity: 0;"><ins
                                                        class="iCheck-helper"
                                                        style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
                                                </div> -->

                                                <!-- <div class="icheckbox_flat-blue checked" aria-checked="true"
                                                    aria-disabled="false" style="position: relative;"><input
                                                        type="checkbox" class="custom-control-input"
                                                        style="position: absolute; opacity: 0;"><ins
                                                        class="iCheck-helper"
                                                        style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
                                                </div> -->

                                            </div>

                                            <div class="app-contact-star"><a href="#"><i
                                                        class="fa fa-star text-yellow"></i></a></div>
                                            {{if value.isread==0}}
                                            <span class="badge badge-dot badge-danger"></span>
                                            {{/if}}
                                            {{if value.isread==1}}
                                            <span class="badge badge-dot badge-info"></span>
                                            {{/if}}


                                            <a class="flexbox flex-grow gap-items text-truncate" href="#qv-user-details"
                                                data-toggle="quickview">
                                                <img class="avatar" src="{{value.avatar}}" alt="...">

                                                <div class="media-body text-truncate">
                                                    <h6>{{value.modularinfo}}</h6>
                                                    <small>
                                                        <span>{{value.company}}:交接单号ZBTDR{{value.serialnumber}}审核成功</span>
                                                        <span class="divider-dash">{{value.date}}</span>
                                                    </small>
                                                </div>
                                            </a>


                                            <button type="button" class="btn btn-sm btn-danger-outline"
                                                data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash"
                                                    aria-hidden="true"></i></button>
                                            <div class="dropdown">
                                                <a class="text-lighter" href="#" data-toggle="dropdown"><i
                                                        class="ti-more-alt rotate-90"></i></a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#"><i class="fa fa-fw fa-phone"></i>
                                                        联系</a>
                                                    <a class="dropdown-item" href="#"><i
                                                            class="fa fa-fw fa-commenting"></i>
                                                        信息</a>
                                                    <a class="dropdown-item" href="#"><i
                                                            class="fa fa-fw fa-envelope"></i>
                                                        邮箱</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#"><i class="fa fa-fw fa-trash"></i>
                                                        删除</a>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    {{/each}}
                                    </script>
                                </div>


                            </div>

                        </div>


                    </div>


                </section>

            </div>





        </div>
        <!-- ./wrapper -->

        <script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
        <script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
        <script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../../../assets/vendor_components/jquery-ui/jquery-ui.min.js"></script>
        <script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
        <script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
        <script src="../../../assets/vendor_plugins/iCheck/icheck.js"></script>
        <script src="../../js/template.js"></script>
        <script src="../../js/demo.js"></script>

        <script>
            $.get("https://www.easy-mock.com/mock/5d049e135ba86f54cb1d4799/zbt/messageCenter/personalMessage").then(function (res) {
                res.len = res.list.length
                $(".xhrMsg").append(template("msgTemp", res))
                $("#msgTemp").remove()
                setTimeout(function () {
                    $("body").append(` 
                <script src="../../js/pages/app-contact.js" />`)
                }, 1)

            }).catch(function (err) {
                res = personalMessage
                res.len = res.list.length
                $(".xhrMsg").append(template("msgTemp", res))
                $("#msgTemp").remove()
                setTimeout(function () {
                    $("body").append(` 
                <script src="../../js/pages/app-contact.js" />`)
                }, 1)
            })

        </script>

    </body>

</html>